'use strict';
import {WingBlank,Drawer, List, NavBar } from 'antd-mobile';
import React, { Component } from 'react';

export default class MyNavBar extends React.Component {
    constructor(props) {
        super(props);
        this.state = this.getInitialState();
    }
    getInitialState() {
        return {
            open: true,
        }
    }
    onOpenChange(args){
        console.log(args);
        this.setState({ open: !this.state.open });
    }
    render() {
        const sidebar = (<List>
            {[...Array(20).keys()].map((i, index) => {
                if (index === 0) {
                    return (<List.Item key={index}
                                       multipleLine
                    >Category</List.Item>);
                }
                return (<List.Item key={index}
                >Category{index}</List.Item>);
            })}
        </List>);

        return ( <Drawer
            className="my-drawer"
            enableDragHandle
            contentStyle={{ color: '#A6A6A6', textAlign: 'center', paddingTop: 42 }}
            sidebar={sidebar}
            open={this.state.open}
            onOpenChange={e=>this.onOpenChange(e)}
        >
            <View>Click upper-left corner icon</View>
        </Drawer>);
    }
}